import React, { useRef } from 'react'
import { Space, List, Switch } from 'antd-mobile'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { Button, Input, Form, Picker, } from 'react-vant'
import { Image, NavBar, Toast } from '@nutui/nutui-react'
import '@nutui/nutui-react/dist/style.css'
import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react'
import { useEffect } from 'react'
import axios from 'axios'
import { post } from '../../../axios/request'
export default function Getuserimg() {
    let navigate = useNavigate()
    const videoel = useRef();
    useEffect(() => {
        checkCamera()
    }, [])

    // console.log(devicer, 'device');
    const checkCamera = async () => {
        const navigator = window.navigator.mediaDevices;
        // console.log(navigator);
        try {
            const stream = await navigator.getUserMedia({
                audio: false,
                video: {
                    width: 500,
                    height: 500,
                    facingMode: 'user'
                }
            });
            // console.log(stream,'stream');

            if (videoel.current) {
                videoel.current.srcObject = stream;
                videoel.current.play();
            }
        } catch (error) {
            console.log(error, 'error');

        }
    }

    const shoot = async () => {
        if (!videoel.current) return;

        const canvas = document.createElement('canvas');
        canvas.width = videoel.current.videoWidth;
        canvas.height = videoel.current.videoHeight;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(videoel.current, 0, 0, canvas.width, canvas.height);
        const imgs = canvas.toDataURL('image/png');

        // console.log(imgs)
        
        const file=new FormData();
        file.append("name",Date.now()+".png");
        file.append("file",imgs);
        const {data}=await axios.post("http://localhost:3000/users/face-verification",file);
        console.log(data)
        if(data.code==200){
            Toast.show({
                content: '认证成功',
                icon: 'success',
              })
              navigate('/contmain')
              canvas=null
        }else{
            Toast.show({
                content: '认证失败',
                icon: 'fail',
              })
        }
      

        document.body.appendChild(canvas);
    };

    return (
        <div id='getuserimg'>
            <div className="top">
                <NavBar
                    style={{ backgroundColor: '#FFFFFF' }}
                    back={
                        <>
                            <ArrowLeft />
                            返回
                        </>
                    }
                    onBackClick={() => { navigate(-1) }}
                >
                    实名认证
                </NavBar>
                {/* <ArrowLeft></ArrowLeft> */}
            </div>
            <div style={{ overflow: 'hidden' }} className="cen">
                <p style={{ fontSize: '0.5333rem', fontWeight: 'bold', textAlign: 'center', marginTop: '0.3rem' }}>请手持手机对准镜头</p>

                <p style={{ fontSize: '12px', color: 'red', textAlign: 'center', marginTop: '0.4rem' }}>
                    <span>
                        <svg style={{ height: '0.4rem', width: '0.4rem', position: 'relative', right: '0.05rem', top: '0.07rem' }} className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2579" width="200" height="200"><path d="M512 992C246.912 992 32 777.088 32 512 32 246.912 246.912 32 512 32c265.088 0 480 214.912 480 480 0 265.088-214.912 480-480 480zM480 256v352a32 32 0 0 0 64 0V256a32 32 0 0 0-64 0z m-16 528a48 48 0 1 0 96 0 48 48 0 0 0-96 0z" p-id="2580" fill="#2D83FB"></path></svg>
                    </span>
                    <span style={{ textAlign: 'center', display: 'inline-block', letterSpacing: '1px' }}>
                        必要时,公安机关可依法调取人脸信息
                    </span>

                </p>
                <video ref={videoel} style={{ width: '4.6667rem', marginTop: '30px', marginLeft: '2.5rem', borderRadius: '50%', height: 'auto' }}></video>
                <br />
                <span style={{ marginLeft: '3.9rem', marginTop: '50px', display: 'inline-block' }}>
                    <svg t="1727435038121" style={{ width: '100px', height: '100px' }} className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6009" width="200" height="200"><path d="M0 512c0 282.763636 229.236364 512 512 512s512-229.236364 512-512S794.763636 0 512 0 0 229.236364 0 512z" fill="#F9F9F9" p-id="6010"></path><path d="M791.272727 581.166545a23.272727 23.272727 0 0 1 23.109818 20.573091l0.16291 2.699637-0.046546 79.965091-0.325818 10.705454c-3.258182 67.374545-28.392727 92.532364-95.790546 95.790546l-10.705454 0.325818-79.965091 0.046545a23.272727 23.272727 0 0 1-2.699636-46.382545l2.699636-0.162909h79.080727l9.006546-0.162909 8.075636-0.325819 3.723636-0.232727 6.795637-0.698182c23.435636-3.118545 30.789818-12.497455 32.861091-38.888727l0.465454-7.633454 0.232728-8.517819 0.023272-4.631272 0.023273-79.197091a23.272727 23.272727 0 0 1 23.272727-23.272728z m-535.272727 0a23.272727 23.272727 0 0 1 23.109818 20.573091l0.162909 2.699637v79.080727l0.162909 9.006545 0.325819 8.075637 0.232727 3.723636 0.698182 6.795637c3.118545 23.435636 12.497455 30.789818 38.888727 32.86109l7.633454 0.465455 8.517819 0.232727 4.631272 0.023273 79.197091 0.023273a23.272727 23.272727 0 0 1 2.699637 46.382545l-2.699637 0.162909-79.965091-0.046545-10.705454-0.325818c-67.374545-3.258182-92.532364-28.392727-95.790546-95.790546l-0.325818-10.705454-0.046545-5.608728v-74.356363a23.272727 23.272727 0 0 1 23.272727-23.272728zM702.068364 209.454545l5.585454 0.046546 10.705455 0.325818c67.397818 3.258182 92.555636 28.392727 95.813818 95.790546l0.325818 10.705454 0.046546 79.965091a23.272727 23.272727 0 0 1-46.382546 2.699636L768 396.288V317.207273l-0.162909-9.006546-0.325818-8.075636a180.945455 180.945455 0 0 0-0.232728-3.723636l-0.698181-6.795637c-3.118545-23.435636-12.497455-30.789818-38.888728-32.861091l-7.633454-0.465454-8.517818-0.232728-4.631273-0.023272L605.416727 256a23.272727 23.272727 0 0 1-2.722909-46.382545L605.416727 209.454545h96.651637z m-260.189091 0a23.272727 23.272727 0 0 1 2.699636 46.382546l-2.722909 0.162909H340.48l-9.006545 0.162909-8.075637 0.325818a180.968727 180.968727 0 0 0-3.723636 0.232728l-6.795637 0.698181c-23.435636 3.118545-30.789818 12.497455-32.86109 38.888728l-0.465455 7.633454-0.232727 8.517818-0.023273 4.631273L279.272727 396.288a23.272727 23.272727 0 0 1-46.382545 2.699636L232.727273 396.288v-74.356364l0.046545-5.585454 0.325818-10.705455c3.258182-67.397818 28.392727-92.555636 95.790546-95.813818l10.705454-0.325818 5.608728-0.046546h96.651636z" fill="#5693FF" p-id="6011"></path><path d="M430.545455 430.545455m-34.909091 0a34.909091 34.909091 0 1 0 69.818181 0 34.909091 34.909091 0 1 0-69.818181 0Z" fill="#5693FF" p-id="6012"></path><path d="M616.727273 430.545455m-34.909091 0a34.909091 34.909091 0 1 0 69.818182 0 34.909091 34.909091 0 1 0-69.818182 0Z" fill="#5693FF" p-id="6013"></path><path d="M436.363636 546.909091a87.272727 87.272727 0 0 0 174.429091 4.654545l0.116364-4.654545h34.909091a122.181818 122.181818 0 0 1-244.270546 5.026909l-0.093091-5.026909h34.909091z" fill="#5693FF" p-id="6014"></path></svg>

                </span>
                <Button onClick={shoot} round nativeType='submit' style={{ backgroundColor: '#2D83FB', color: 'white', width: '8rem', marginLeft: '1.0667rem', marginTop: '0.2667rem' }} block>
                    确定
                </Button>
            </div>
        </div>
    )
}
